<template>
  <div class="dndList">
    <div :style="{width:width1}" class="dndList-list">
      <h3>{{ list1Title }}</h3>
      <draggable :set-data="setData" item-key="id" :list="list1" group="article" class="dragArea">
        <template #item="{ element }">
          <div class="list-complete-item">
            <div class="list-complete-item-handle">
              {{ element.id }}[{{ element.author }}] {{ element.title }}
            </div>
            <div style="position:absolute;right:0px;">
            <span style="float: right ;margin-right:5px;" @click="deleteEle(element)">
<!--              <i style="color:#ff4949" class="el-icon-delete" />-->
              <el-icon style="vertical-align: center;color: #ff4949; height: 100%;">
                <Delete />
              </el-icon>
            </span>
            </div>
          </div>
        </template>
      </draggable>
    </div>
    <div :style="{width:width2}" class="dndList-list">
      <h3>{{ list2Title }}</h3>
      <draggable :list="list2" group="article" class="dragArea" item-key="id">
        <template #item="{ element }">
          <div class="list-complete-item">
            <div class="list-complete-item-handle2" @click="pushEle(element)">
              {{ element.id }} [{{ element.author }}] {{ element.title }}
            </div>
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DndList'
}
</script>

<script setup>
import { defineProps, computed } from 'vue'
import Draggable from 'vuedraggable'
import { Delete } from '@element-plus/icons-vue'

const list1 = computed(() => props.list1)
const list2 = computed(() => props.list2)

const props = defineProps({
  list1: {
    type: Array,
    default() {
      return []
    }
  },
  list2: {
    type: Array,
    default() {
      return []
    }
  },
  list1Title: {
    type: String,
    default: 'list1'
  },
  list2Title: {
    type: String,
    default: 'list2'
  },
  width1: {
    type: String,
    default: '48%'
  },
  width2: {
    type: String,
    default: '48%'
  }
})

const isNotInList1 = v => {
  props.list1.every(k => v.id !== k.id)
}

const isNotInList2 = v => props.list2.every(k => v.id !== k.id)

const deleteEle = ele => {
  for (const item of list1.value) {
    if (item.id === ele.id) {
      const index = list1.value.indexOf(item)
      list1.value.splice(index, 1)
      break
    }
  }

  if (isNotInList2(ele)) {
    list2.value.unshift(ele)
  }
}

const pushEle = ele => {
  for (const item of list2.value) {
    if (item.id === ele.id) {
      const index = list2.value.indexOf(item)
      list2.value.splice(index, 1)
      break
    }
  }
  if (isNotInList1(ele)) {
    list1.value.push(ele)
  }
}

const setData = dataTransfer => {
  dataTransfer.setData('Text', '')
}

</script>

<style lang="scss" scoped>
.dndList {
  background: #fff;
  padding-bottom: 40px;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  .dndList-list {
    float: left;
    padding-bottom: 30px;
    &:first-of-type {
      margin-right: 2%;
    }
    .dragArea {
      margin-top: 15px;
      min-height: 50px;
      padding-bottom: 30px;
    }
  }
}

.list-complete-item {
  cursor: pointer;
  position: relative;
  font-size: 14px;
  padding: 5px 12px;
  margin-top: 4px;
  border: 1px solid #bfcbd9;
  transition: all 1s;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.list-complete-item-handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 50px;
}

.list-complete-item-handle2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 20px;
}

.list-complete-item.sortable-chosen {
  background: #4AB7BD;
}

.list-complete-item.sortable-ghost {
  background: #30B08F;
}

.list-complete-enter,
.list-complete-leave-active {
  opacity: 0;
}
</style>
